<!-- 首页 -->
<template>
  <div class="home-layout">
    <!-- <div @click="openChat()" style="position: fixed; right: 5px;bottom: 5px;z-index: 10000;width: 120px;height: 40px;cursor: pointer;display: flex;align-items: center;justify-content: center;background-color: #15C5CE;color: #fff;font-size: 14px;border-radius: 8px;">在线客服</div> -->
    <!-- 顶部Nav开始 -->
    <homeHeader v-if="clientwidth > 1080"></homeHeader>
    <headerPhone v-else></headerPhone>
    <!-- 顶部Nav结束 -->

    <!-- 头部开始 -->
    <header id="header">
      <div
        :style="{
          backgroundImage:
            'url(' + require('@/assets/images/homepage/header-bt-bg.svg') + ')',
        }"
        class="bt-bg"
      ></div>
      <div class="header-bg">
        <p v-for="item in 50" :key="item">
          <span v-for="item in 35" :key="item"></span>
        </p>
      </div>

      <div class="header-main">
        <div class="header-left">
          <p class="title webfont-Medium">高度集成的智能投放平台</p>
          <p class="sub-title webfont-Medium">Apple官方授信合作伙伴</p>
          <p class="desc">
            通过高集成、数字化、智能化的投放模式，让投放更简单、更有价值
          </p>
         <!-- <div
            class="btn pointer"
            style="cursor: pointer; z-index: 6; position: relative"
            @click="open3ydta"
          >
            联系客服
          </div> -->
        </div>

        <div class="header-rt">
          <home-img></home-img>
        </div>
      </div>

      <div class="header-bt">
        <ul>
          <li v-for="(item, index) in haderBtOP" :key="index" class="bt-item">
            <img :src="item.img" />
            <div :style="{ color: item.color }">
              <p class="num webfont-Medium">{{ item.name }}</p>
              <p class="sec">{{ item.sec }}</p>
            </div>
          </li>
        </ul>
      </div>
    </header>
    <!-- 头部结束 -->

    <!-- app轮播图开始 -->
    <div v-if="clientwidth >= 1080" class="app-box" style="height: 260px">
      <div style="height: 100px; overflow: hidden">
        <vue-seamless-scroll :data="appList" :class-option="defaultOption">
          <ul v-for="(item, index) in appList" :key="index">
            <li class="ul-scoll">
              <div class="app-list flex">
                <img
                  v-for="(v, i) in item"
                  :key="i"
                  :src="v.img"
                  :style="{ height: v.height, width: v.width }"
                />
              </div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>

    <!-- 移动端轮播图 -->
    <div v-else class="app-box">
      <p class="title webfont-Medium">合作伙伴</p>

      <el-carousel
        ref="carousel-box"
        indicator-position="none "
        arrow="never"
        class="carousel-box"
      >
        <el-carousel-item v-for="(item, index) in appList" :key="index">
          <ul class="app-list flex">
            <li v-for="(v, i) in item" v-if="i < 6" :key="i" class="app-item">
              <img :src="v.img" :style="{ height: v.height, width: v.width }" />
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>

      <!-- <div class="arrow-btn">
        <div class="left" @click="carouselPreOrNext('prev')">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="right" @click="carouselPreOrNext('next')"> <i class="el-icon-arrow-right"></i></div>
      </div> -->
    </div>

    <!-- app轮播图开始 结束 -->

    <!--  -->
    <case-box></case-box>
    <!--  -->

    <scheme @handleInto="handleInto"></scheme>
    <!--  -->

    <div class="serve-box">
      <p class="title webfont-Medium">
        {{
          clientwidth < 1080
            ? "专属特色服务"
            : "专属特色服务，助力投放效果持续升级"
        }}
      </p>
      <ul class="serve-main flex">
        <li v-for="item in serveOP" class="serve-item">
          <img :src="item.img" class="bg-img" />

          <div class="item-header">
            <div
              class="header-img"
              :style="{
                backgroundImage:
                  'url(' +
                  require('@/assets/images/homepage/serve-header-bg.svg') +
                  ')',
              }"
            >
              <img :src="item.img" />
            </div>

            <p class="title webfont-Medium">{{ item.title }}</p>
            <p class="sub-title">{{ item.subTitle }}</p>
          </div>

          <ul class="item-main">
            <li v-for="v in item.info">
              <span style="text-align: left">{{ v.title }}:</span>
              <p>{{ v.txt }}</p>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!--  -->

    <div class="partner-box">
      <p class="title webfont-Medium">
        {{ clientwidth < 1080 ? "归因伙伴" : "3YData与您的归因伙伴紧密集成" }}
      </p>
      <div class="flex">
        <div v-for="(item, index) in 4" :key="index" class="img-box">
          <img
            :src="
              require('@/assets/images/homepage/partner-' +
                (index + 1) +
                '.svg')
            "
          />
        </div>
      </div>
    </div>

    <!--  -->
  <!--  <div
      class="issue-box"
      :style="{
        backgroundImage:
          'url(' + require('@/assets/images/homepage/issue-bg.svg') + ')',
      }"
    >
      <p class="title webfont-Medium">
        {{ clientwidth < 1080 ? "快来3YData投放吧" : "准备好在3YData投放了吗" }}
      </p>
      <div role="buttton" class="pointer"  @click="open3ydta">联系客服</div>
    </div> -->
    <!-- 底部 -->
    <homeFooter></homeFooter>

    <el-drawer
      :visible.sync="dialogFormVisible"
      direction="btt"
      :show-close="false"
      class="yan-shi"
      :wrapper-closable="false"
      :append-to-body="true"
      size="560"
    >
      <template slot="title">
        <div class="close-box">
          <span class="close-title">咨询获取产品演示及专业ASA投放方案</span>
          <span class="close-btn" @click="handleClose('yanshi')">
            <i class="el-icon-close" />
          </span>
        </div>
      </template>

      <div class="yan-shi-main">
        <div class="bgimg">
          <img :src="require('@/assets/images/hpdialog.png')" />
        </div>
        <div class="sub-title">
          <p>留下您的联系方式，完美专业的ASA投放师免费为您演示<br />并服务</p>
        </div>
        <el-form
          ref="yanshi"
          :model="form"
          :rules="rules"
          label-width="15px"
          class="yan-shi-form"
          size="medium"
        >
          <el-row justify="space-between" type="flex">
            <el-col :span="11">
              <el-form-item prop="name" label=" ">
                <el-input v-model="form.name" placeholder="名称" />
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item prop="phone" label=" ">
                <el-input v-model="form.phone" placeholder="手机" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="space-between" type="flex">
            <el-col :span="11">
              <el-form-item prop="email" label=" ">
                <el-input v-model="form.email" placeholder="邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="CompanyName" label=" ">
                <el-input v-model="form.CompanyName" placeholder="公司名称" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label-width="0px">
            <el-input
              v-model="form.cont"
              type="textarea"
              :rows="7"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="setdialogFormVisible('yanshi')"
          >确 定</el-button
        >
      </div>
    </el-drawer>
    <el-dialog :visible.sync="contactUsShow" width="300px" class="call-us-box">
      <div slot="title" class="dialog-title webfont-Bold">联系我们</div>

      <div class="img">
        <el-image
          :src="require('@/assets/images/homepage/code3.png')"
          fit="cover"
          style="height: 100%; width: 100%"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>

      <div slot="footer" class="dialog-footer">
        <p>联系我们,获取演示</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import vueSeamlessScroll from "vue-seamless-scroll";
import homeImg from "@/components/home/img.vue";
import homeHeader from "@/components/home/header.vue";
import headerPhone from "@/components/home/header-phone.vue";
import homeFooter from "@/components/home/footer.vue";
import scheme from "./components/scheme.vue";
import caseBox from "./components/case.vue";
// import countTo from 'vue-count-to'

import { getDefultPath } from "@/utils/index.js";
import { removeCookie } from "@/utils/auth";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    vueSeamlessScroll,
    homeImg,
    homeFooter,
    headerPhone,
    homeHeader,
    caseBox,
    scheme,
    // countTo
  },
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    var userEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    // 这里存放数据
    return {
      contactUsShow:false,
      clientwidth: window.innerWidth,
      timer: 0, // 定时器
      haderBtOP: [
        {
          img: require("@/assets/images/homepage/header-bt-1.png"),
          name: "30%",
          sec: "ROI平均提高",
          color: "#FF782D",
        },
        {
          img: require("@/assets/images/homepage/header-bt-2.png"),
          name: "1000+",
          sec: "服务客户数",
          color: "#34A853",
        },
        {
          img: require("@/assets/images/homepage/header-bt-3.png"),
          name: "200000+",
          sec: "投放关键词",
          color: "#1877F2",
        },
        {
          img: require("@/assets/images/homepage/header-bt-4.png"),
          name: "1000000+",
          sec: "应用动态监控",
          color: "#FC558C",
        },
      ],
      appList: [
        [
          {
            img: require("@/assets/images/appList/1-1.png"),
            width: "203px",
            height: "102px",
          },
          {
            img: require("@/assets/images/appList/1-2.png"),
            width: "171",
            height: "49px",
          },
          {
            img: require("@/assets/images/appList/1-3.png"),
            width: "161px",
            height: "45px",
          },
          {
            img: require("@/assets/images/appList/1-4.png"),
            width: "124px",
            height: "46px",
          },
          {
            img: require("@/assets/images/appList/1-5.png"),
            width: "130px",
            height: "49px",
          },
          {
            img: require("@/assets/images/appList/1-6.png"),
            width: "99px",
            height: "34px",
          },
          {
            img: require("@/assets/images/appList/1-7.png"),
            width: "117px",
            height: "117px",
          },
        ],
        [
          {
            img: require("@/assets/images/appList/2-1.png"),
            width: "166px",
            height: "47px",
          },
          {
            img: require("@/assets/images/appList/2-2.png"),
            width: "83px",
            height: "43px",
          },
          {
            img: require("@/assets/images/appList/2-3.png"),
            width: "140px",
            height: "35px",
          },
          {
            img: require("@/assets/images/appList/2-4.png"),
            width: "140px",
            height: "30px",
          },
          {
            img: require("@/assets/images/appList/2-5.png"),
            width: "154px",
            height: "38px",
          },
          {
            img: require("@/assets/images/appList/2-6.png"),
            width: "129px",
            height: "43px",
          },
          {
            img: require("@/assets/images/appList/2-7.png"),
            width: "147px",
            height: "51px",
          },
        ],
        [
          {
            img: require("@/assets/images/appList/logo-1.png"),
            width: "166px",
            height: "47px",
          },
          {
            img: require("@/assets/images/appList/logo-2.png"),
            width: "121px",
            height: "55px",
          },
          {
            img: require("@/assets/images/appList/logo-3.png"),
            width: "119px",
            height: "35px",
          },
          {
            img: require("@/assets/images/appList/logo-4.png"),
            width: "139px",
            height: "68px",
          },
          {
            img: require("@/assets/images/appList/logo-5.png"),
            width: "104px",
            height: "34px",
          },
          {
            img: require("@/assets/images/appList/logo-6.png"),
            width: "194px",
            height: "32px",
          },
          {
            img: require("@/assets/images/appList/logo-7.png"),
            width: "110px",
            height: "54px",
          },
        ],
      ],

      serveOP: [
        {
          title: "专业服务团队",
          subTitle:
            "经验丰富的专业优化师团队，为您量身定制多样的投放策略，达成广告目标。",
          img: require("@/assets/images/homepage/serve-1.png"),
          info: [
            {
              title: "专业",
              txt: "优化师均获得Apple Ads官方的优化师资格认证。",
            },
            {
              title: "经验",
              txt: "多年海外广告投放经验，出色的多语言投放能力。",
            },
            {
              title: "效果",
              txt: "根据设定的广告目标，获取最大化的广告回报率。",
            },
          ],
        },
        {
          title: "全新增长链路",
          subTitle:
            "充分利用技术和运营优势，开辟全新增长路径，获得广告流量、自然流量多重收益。",
          img: require("@/assets/images/homepage/serve-2.png"),
          info: [
            {
              title: "广告流量",
              txt: "精细化ASA广告投放策略。",
            },
            {
              title: "自然流量",
              txt: "优化App在关键词下的表现。",
            },
            {
              title: "多重收益",
              txt: "精准获客，实现用户高速增长。",
            },
          ],
        },
        {
          title: "特色增值服务",
          subTitle:
            "面对苹果政策和市场变化，为您提供独具特色的动态资讯、观点分析、审核指导、行业报告等增值服务。",
          img: require("@/assets/images/homepage/serve-3.png"),
          info: [
            {
              title: "即时政策动态",
              txt: "苹果广告政策调整、投放玩法升级即时同步",
            },
            {
              title: "苹果审核指导",
              txt: "专业优化师悉心教学，一步到位过审投放",
            },
            {
              title: "行业洞察报告",
              txt: "联合合作伙伴，定期发布移动营销行业报告",
            },
          ],
        },
      ],

      // 弹窗
      dialogFormVisible: false,
      form: {
        name: "",
        phone: "",
        email: "",
        CompanyName: "",
        cont: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: checkphone,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: userEmail,
            trigger: "blur",
          },
        ],
        CompanyName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 1.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 100, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1500, // 单步运动停止的时间(默认值1000ms)
      };
    },
    optionLeft() {
      return {
        direction: 3,
        limitMoveNum: 2,
      };
    },
    optionLeft1() {
      return {
        direction: 2, // 前左
        limitMoveNum: 2,
      };
    },
  },
  // 监控data中的数据变化
  watch: {},

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // localStorage.removeItem('selfHelp')
    // localStorage.removeItem('autonmy')
    // // localStorage.removeItem('condition')
    // localStorage.removeItem('administration')
    // console.log('进来首页了吗')
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === "/news-list" || from.path === "/news-details") {
        vm.$router.go(0);
      }
    });
  },

  mounted() {
    // <meta name="referrer" content="never">
    const newBridge = document.getElementById("newBridge");
    if (newBridge) {
      newBridge.style.display = "block";
    }
    const metaList = document.getElementsByName("referrer");
    metaList.length &&
      metaList.forEach((item) => {
        if (item.content === "never") {
          item.content = "no-referrer-when-downgrade";
        }
      });
    // this.addBaiDu();
    window.addEventListener("resize", () => {
      this.clientwidth = window.innerWidth;
    });
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener("resize", () => {});
    this.removerBaiDu();
  }, // 生命周期 - 销毁之前

  destroyed() {},
  // 方法集合
  methods: {
    openChat() {
      window.open('https://work.weixin.qq.com/kfid/kfc8f988e91e6278c87', 'newwindow', 'height=600, width=600, top=200,  left=200, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no')
    },
    open3ydta() {
      window.open('https://work.weixin.qq.com/kfid/kfc8f988e91e6278c87', 'newwindow', 'height=600, width=600, top=200,  left=200, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no')
      // window.open("https://login.3ydata.com/");
    },
    /*    handleCarouselChange(index) {
                  console.log(index, '索引')
                }, */
    carouselPreOrNext(type) {
      if (type === "next") {
        this.$refs["carousel-box"].next();
      } else {
        this.$refs["carousel-box"].prev();
      }
    },

    // 安装百度客服js代码
    addBaiDu() {
      // 安装客服代码
      const baseUrl = process.env.VUE_APP_BASE_API;
      let src = "";
      if (baseUrl.indexOf("test") > -1) {
        // 测试服
        src = "https://hm.baidu.com/hm.js?55752a4983d992e78a6c2877a1c36b6a";
      } else {
        // 正式服
        src = "https://hm.baidu.com/hm.js?90f6c6b0aa96611326ac3bb180247d15";
      }
      const scriptInfo = document.createElement("script");
      scriptInfo.type = "text/javascript";
      scriptInfo.setAttribute("data-callType", "callscript");
      scriptInfo.src = src;
      document.head.append(scriptInfo);

      // 显示对话框
      const newBridge = document.getElementById("newBridge");
      if (newBridge) {
        newBridge.style.display = "block";
      }
      // 显示咨询框
      const nb_icon_wrap = document.getElementById("nb_icon_wrap");
      if (nb_icon_wrap) {
        nb_icon_wrap.style.display = "block";
      }

      // 显示留言板
      const nb_nodeboard = document.getElementById("nb_nodeboard");
      if (nb_nodeboard) {
        nb_nodeboard.style.display = "block";
      }
    },
    // 移除百度客服聊天
    removerBaiDu() {
      // 隐藏对话框
      const newBridge = document.getElementById("newBridge");
      if (newBridge) {
        newBridge.style.display = "none";
      }
      // 隐藏咨询框
      const nb_icon_wrap = document.getElementById("nb_icon_wrap");
      if (nb_icon_wrap) {
        nb_icon_wrap.style.display = "none";
      }

      // 隐藏留言板
      const nb_nodeboard = document.getElementById("nb_nodeboard");
      if (nb_nodeboard) {
        nb_nodeboard.style.display = "none";
      }

      // 关闭消息事件
      const nbwlToggle = document.getElementById("nbwlToggle");
      nbwlToggle && nbwlToggle.click();

      // 移除
      const callscriptList = document.querySelectorAll(
        "script[data-calltype=callscript]"
      );
      callscriptList.forEach((item) => {
        document.head.removeChild(item);
      });
    },

    handleInto() {
      // console.log('点击了进入平台')
      /*  const newBridge = document.getElementById('newBridge')
                                                                            if (!newBridge) return false */

      const token = this.$store.state.user.token;
      const userInfo = this.$store.state.user.userInfo;
      if (!token) {
        return this.$router.push({
          path: "/login",
        });
      } else {
        if (Object.values(userInfo).length < 1) {
          this.$store.dispatch("user/resetToken");
          return this.$router.push({
            path: "/login",
          });
        } else {
          const roleName = userInfo.roleName;
          const path = getDefultPath(roleName);
          return this.$router.push({
            path,
          });
        }
      }
    },

    intoManage(link) {
      this.$router.replace({
        name: link,
      });
    },

    handleIndexChange(index) {
      this.activeIndex = index;
    },

    handleClick1(tab, event) {
      this.asimg = tab.index - 0; // 转换为数字
      const className = ".ass_tabs .el-tabs .is-top .el-tabs__active-bar";
      if (tab.index === "1") {
        this.$(className).css("left", "6.3%");
      } else if (tab.index === "2") {
        this.$(className).css("left", "13%");
      } else {
        this.$(className).css("left", "0");
      }
    },

    handleClose(name) {
      this.$refs[name].resetFields();
      this.dialogFormVisible = false;
    },
    handclose() {},

    setdialogFormVisible(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const data = {
            name: this.form.name,
            email: this.form.phone,
            phone: this.form.email,
            companyName: this.form.CompanyName,
            problem: this.form.cont,
          };
          infoGathering(data).then((res) => {
            if (res.data.flag) {
              this.$message.closeAll();
              this.$message({
                message: "提交成功，我们的工作人员将会尽快联系您",
                type: "success",
              });
              this.$refs[name].resetFields();
              this.dialogFormVisible = false;
            } else {
              this.$refs[name].resetFields();
              this.$message.closeAll();
              this.$message({
                message: "系统繁忙，请稍微再试",
                type: "error",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
  }, // 生命周期 - 销毁完成
};
</script>
<style lang='scss' scoped>
@import "~@/styles/variables.scss";

#header {
  width: 100%;
  max-width: 100vw;
  min-width: 1200px;
  min-height: 682px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(221, 238, 239, 0.43) 0%,
    #deffff 100%
  );

  .bt-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 127px;
    width: calc(834px + ((100vw - 1200px) / 2));

    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .header-bg {
    position: absolute;
    padding-left: 56px;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 0;

    p {
      margin-right: 76px;
      height: 100%;
      display: inline-block;

      span {
        display: block;
        background-color: rgba(166, 166, 166, 0.1);
        width: 1px;
        height: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .header-main {
    display: flex;
    width: 1200px;
    margin: 0 auto;

    .header-left {
      padding-top: 210px;
      padding-right: 222px;

      .title {
        font-size: 32px;
        line-height: 1em;
        margin-bottom: 32px;
        letter-spacing: 0.08em;
      }

      .desc,
      .sub-title {
        font-size: 16px;
        line-height: 1em;
        color: $mainColor1;
        margin-bottom: 24px;
      }

      .desc {
        color: rgba(51, 64, 74, 0.8);
        margin-bottom: 60px;
      }

      .btn {
        background-color: $mainColor1;
        width: 128px;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        border-radius: 4px;
      }
    }

    .header-rt {
      padding-top: 170px;
    }
  }

  .header-bt {
    position: relative;
    z-index: 1;
    padding-top: 148px;
    max-width: 1200px;
    min-width: 1200px;

    margin: 0 auto;

    img {
      height: 30.06px;
      width: auto;
      vertical-align: middle;
    }

    ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .bt-item {
        margin-right: 70px;

        &:last-of-type {
          margin-right: 0px;
        }

        p {
          text-indent: 38px;
          color: inherit;
        }

        .num {
          margin-bottom: 18px;
          margin-top: -8px;
          font-size: 24px;
          line-height: 20px;
        }

        .sec {
          text-align: center;
          font-size: 14px;
          line-height: 14px;
        }
      }
    }
  }
}

.app-box {
  padding-top: 80px;
  min-width: 1200px;

  .app-list {
    height: 100px;
    max-width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      opacity: 0.15;
      transition: opacity 0.35s ease;

      &:hover {
        opacity: 1;
      }
    }
  }
}

.serve-box {
  .title,
  .sub-title {
    text-align: center;
  }

  > .title {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 60px;
  }

  > .sub-title {
    margin-bottom: 52px;
    font-size: 14px;
    line-height: 28px;
    color: rgba(51, 64, 74, 0.8);
  }

  .serve-main {
    min-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 112px;

    .serve-item {
      position: relative;
      padding: 32px 24px;
      z-index: 0;
      width: 384px;
      height: 460px;
      overflow: hidden;
      background: #ffffff;
      border-radius: 4px;
      z-index: 1;

      img {
        opacity: 0.7;
      }

      &:hover {
        transform: scale(1.03);
        z-index: 3;

        .bg-img {
          opacity: 0.3;
        }

        .header-img {
          height: 0px !important;
          opacity: 0;
        }

        .item-header .title {
          padding-top: 78px;
        }
      }

      .bg-img {
        width: 300px;
        height: auto;
        position: absolute;
        opacity: 0;
        z-index: 0;
        transform: rotate(-25deg);
        transition: opacity 1s ease;
      }

      &:nth-of-type(1) .bg-img {
        width: 280px;
        bottom: -66px;
        right: -60px;
      }

      &:nth-of-type(2) .bg-img {
        width: 270px;
        bottom: -30px;
        right: -40px;
      }

      &:nth-of-type(3) .bg-img {
        width: 250px;
        bottom: -54px;
        right: -30px;
      }

      .item-header {
        text-align: center;

        .header-img {
          background-repeat: no-repeat;
          background-size: 100%;
          width: 120px;
          height: 76px;
          margin: 0 auto;
          overflow: hidden;
          transition: all 0.8s linear;
        }

        img {
          margin-top: 14px;
          width: 48px;
          height: 48px;
        }

        .title {
          font-size: 20px;
          line-height: 20px;
          padding-bottom: 20px;
          padding-top: 32px;
        }

        .sub-title {
          color: rgba(51, 64, 74, 0.8);
          font-size: 14px;
          line-height: 21px;
          text-align: center;
        }
      }

      .item-main {
        padding-left: 20px;
        padding-top: 20px;
        color: rgba(51, 64, 74, 0.8);
        font-size: 12px;
        line-height: 47px;

        li {
          position: relative;
          color: rgba(51, 64, 74, 0.8);
          text-align: center;
          margin: 0 auto;

          span,
          p {
            position: relative;
            display: inline-block;
            font-size: 12px;
          }

          p {
            min-width: 170px;
            text-align: left;
          }

          span::after {
            content: "1";
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: -20px;
            top: 18px;
            border-radius: 50%;
            font-size: 0;
            background-color: $mainColor1;
          }
        }
      }
    }

    .serve-item {
      &:last-of-type .item-main li p {
        min-width: 230px;
      }
    }
  }
}

.partner-box {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;

  .title {
    text-align: center;
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 60px;
  }

  div {
    img {
      width: auto;

      &:first-of-type {
        height: 57px;
      }

      &:nth-of-type(2) {
        height: 44px;
      }

      &:nth-of-type(3) {
        height: 37.07px;
      }

      &:last-of-type {
        height: 32px;
      }
    }
  }
}

.issue-box {
  min-width: 1200px;
  text-align: center;
  padding: 68px 0;
  background-repeat: no-repeat;
  background-size: cover;

  .title {
    margin-bottom: 32px;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0.1em;
    color: #ffffff;
  }

  div {
    margin: 0 auto;
    width: 128px;
    height: 40px;
    background: #ffffff;
    border-radius: 4px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    /* 主色 */
    color: $mainColor1;
  }
}

@media screen and (min-width: 1081px) and (max-width: 1240px) {
  .home-layout {
    #header .header-main,
    #header .header-bt ul,
    .app-box,
    .serve-box,
    .partner-box,
    .issue-box > div,
    .issue-box > p {
      transform: scale(0.9);
    }
  }
}

/* 移动端样式*/
@media screen and (max-width: 1080px) {
  html,
  body {
    max-width: 100vw;
    width: 100vw;
    overflow: hidden;
  }

  .home-layout {
    width: 100vw;

    #header {
      width: 100vw;
      min-width: 100vw;
      max-width: 100vw;

      .header-bg {
        display: none;
        opacity: 0;
      }

      .header-main {
        box-sizing: border-box;
        width: 100vw;

        flex-direction: column;
        background: linear-gradient(
          180deg,
          rgba(221, 238, 239, 0.43) 0%,
          rgba(222, 255, 255, 1) 100%
        );

        .header-left {
          padding-right: 0;
          padding-top: 9.371rem;

          P {
            text-align: center;
          }

          .title {
            margin-bottom: 1.371rem;
            font-size: 1.371rem;
            line-height: 1.314rem;
            letter-spacing: 0.011rem;
          }

          .sub-title {
            margin-bottom: 0.914rem;
            font-size: 0.8rem;
            line-height: 0.743rem;
            letter-spacing: 0.011rem;
          }

          .desc {
            margin-bottom: 2.286rem;
            color: rgba(51, 64, 74, 0.8);
            font-size: 0.571rem;
            line-height: 0.571rem;
          }

          .btn {
            margin: 0 auto;

            width: 5.714rem;
            height: 2.514rem;
            line-height: 2.514rem;
            font-weight: 500;
            font-size: 0.8rem;
            border-radius: 4px;
            background: rgba(21, 197, 206, 1);
            box-shadow: 0rem 0.8rem 6.2rem rgba(1, 213, 224, 0.3);
          }
        }
      }

      .header-rt {
        padding-top: 4.479rem;
        width: 100vw;
        min-width: 100vw;
      }

      .bt-bg {
        display: none;
      }

      .header-bt {
        width: 100vw;
        min-width: 100vw;
        padding-top: 3.491rem;
        padding-bottom: 2.286rem;

        ul {
          justify-content: space-between;

          .bt-item {
            margin: 0;
            text-align: center;
            flex: 1;

            img {
              height: 1rem;
              margin-bottom: 0.67rem;
            }

            .num {
              text-align: center;
              margin-top: 0;
              font-size: 0.686rem;
              line-height: 1.143rem;
              margin-bottom: 0;
              text-indent: 0;
            }

            .sec {
              text-align: center;
              font-size: 0.457rem;
              line-height: 0.8rem;
              text-indent: 0;
            }
          }
        }
      }
    }

    .app-box {
      width: 100vw;
      min-width: 100vw;
      padding-top: 3.2rem;
      padding-bottom: 1rem;
      overflow: hidden;
      .title {
        padding-bottom: 2rem;
        color: rgba(57, 68, 78, 1);
        text-align: center;
        font-weight: 500;
        font-size: 1.829rem;
        line-height: 1.829rem;
        letter-spacing: 0.011rem;
      }

      .carousel-box {
        overflow: hidden;
      }

      .carousel-box /deep/ .el-carousel__container {
        height: 10.2rem;
        overflow: hidden;
      }

      .app-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        padding: 0 1.6rem;
        height: auto;

        .app-item {
          width: 33.32%;
          margin-bottom: 2.55rem;
          &:nth-last-of-type(-n + 3) {
            margin-bottom: 0;
          }

          img {
            width: 80% !important;
            height: auto !important;
            opacity: 1;
          }
        }
      }

      .arrow-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          width: 2.286rem;
          height: 2.286rem;
          border-radius: 9px;
          border: 1px solid rgba(21, 197, 206, 1);
          box-sizing: border-box;
          text-align: center;
          line-height: 2.286rem;
          font-weight: 600;
          color: rgba(21, 197, 206, 1);
        }

        .left {
          margin-right: 4.14rem;
        }
      }
    }

    .serve-box {
      background: linear-gradient(
        180deg,
        rgba(221, 238, 239, 1) 0%,
        rgba(222, 255, 255, 1) 100%
      );

      .title {
        padding-top: 4rem;
        margin-bottom: 3.029rem;
        font-size: 1.829rem;
        line-height: 1.829rem;
        letter-spacing: 0.011rem;
      }

      .serve-main {
        display: block;
        width: 100vw;
        min-width: 100vw !important;
        overflow: hidden;

        .serve-item {
          width: 16.8rem;
          height: auto;
          margin: 0 auto;
          margin-bottom: 3.429rem;
          padding: 0 1.371rem;
          background: rgba(255, 255, 255, 1);
          border-radius: 6px;

          .bg-img {
            opacity: 0.25;
          }

          .item-header {
            .header-img {
              display: none;
            }

            .title {
              padding-top: 2.358rem;
              padding-bottom: 0.8rem;
              margin-bottom: 0;
              color: rgba(36, 190, 190, 1);
              font-weight: 500;
              text-align: center;
              font-size: 1.371rem;
              line-height: 1.143rem;
            }

            .sub-title {
              padding-bottom: 1.61rem;
              text-align: center;
              color: rgba(51, 64, 74, 0.8);
              font-size: 0.686rem;
              line-height: 1.37rem;
            }
          }

          .item-main {
            padding: 0;
            margin: 0 auto;
            padding-bottom: 0.5rem;
            width: 12.571rem;

            span {
              padding-bottom: 0.624rem;
              text-align: center;
              color: rgba(21, 197, 206, 1);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 0.914rem;
              line-height: 0.914rem;
            }

            p {
              padding-bottom: 1.73rem;
              text-align: center;
              color: rgba(51, 64, 74, 0.76);
              font-size: 0.8rem;
              line-height: 1.257rem;
            }

            span {
              display: block;
              text-align: center !important;
            }

            span::after {
              display: none;
            }
          }
        }

        .serve-item {
          &:first-of-type .bg-img {
            width: 12.094rem;
            right: -1.4rem;
            bottom: -1.4rem;
          }

          &:nth-of-type(2) .bg-img {
            width: 13.324rem;
            right: -2rem;
            bottom: -2.4rem;
          }

          &:last-of-type .bg-img {
            width: 12rem;
            right: -1.4rem;
            bottom: -3.4rem;
            transform: rotate(-16deg);
          }
        }
      }
    }

    .partner-box {
      width: 100vw;
      min-width: 100vw;
      overflow: hidden;

      .title {
        margin-bottom: 3.429rem;
        font-weight: 500;
        font-size: 1.829rem;
        line-height: 1.829rem;
        letter-spacing: 0.011rem;
      }

      div.flex {
        display: block;
        padding: 0 1.6rem;

        .img-box {
          &:first-of-type img {
            height: 3.2rem;
            margin-bottom: 1.3rem;
          }

          &:nth-of-type(2) img {
            height: 2.6rem;
            margin-bottom: 1.6rem;
          }

          &:nth-of-type(3) img {
            height: 2.1rem;
            margin-bottom: 2.3rem;
          }

          &:nth-of-type(4) img {
            height: 1.6rem;
          }
        }

        .img-box:nth-of-type(even) {
          text-align: right;
        }
      }
    }

    .issue-box {
      min-width: 100vw;
      width: 100vw;
      overflow: hidden;

      .title {
        font-weight: 500;
        font-size: 1.829rem;
        line-height: 1.314rem;
      }

      > div {
        width: 7.943rem;
        height: 2rem;
        line-height: 2rem;
        font-weight: 500;
        font-size: 0.914rem;
        letter-spacing: 0.011rem;
      }
    }
  }
}
</style>
